<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>


<body>
	<div id="map-wrap" style="height: 600px;">
		<!-- 这里以后是地图 -->
	</div>
</body>
<script src="/dep/echarts.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function() {
		$.get('map/json/province/guangdong.json', function (guangdong) {
			echarts.registerMap('广东', guangdong); // 注册地图
			var mapChart = echarts.init(document.getElementById('map-wrap'));
			
			
			
			var gdpdata = [{
			    name: '广州市',
			    value: 19610
			}, {
			    name: '深圳市',
			    value: 19492
			}, {
			    name: '珠海市',
			    value: 2226
			}, {
			    name: '汕头市',
			    value: 2080
			}, {
			    name: '佛山市',
			    value: 8630
			}, {
			    name: '韶关市',
			    value: 1218
			}, {
			    name: '湛江市',
			    value: 2584
			}, {
			    name: '肇庆市',
			    value: 2084
			}, {
			    name: '江门市',
			    value: 2418
			}, {
			    name: '茂名市',
			    value: 2636
			}, {
			    name: '惠州市',
			    value: 3412
			}, {
			    name: '梅州市',
			    value: 1045
			}, {
			    name: '汕尾市',
			    value: 828
			}, {
			    name: '河源市',
			    value: 898
			}, {
			    name: '阳江市',
			    value: 1319
			}, {
			    name: '清远市',
			    value: 1388
			}, {
			    name: '东莞市',
			    value: 6827
			}, {
			    name: '中山市',
			    value: 3202
			}, {
			    name: '潮州市',
			    value: 976
			}, {
			    name: '揭阳市',
			    value: 2032
			}, {
			    name: '云浮市',
			    value: 778
			}];
			
			var seriesdata = [{
				    name: 'GDP',
				    type: 'map',
				    map: '广东',
				    itemStyle: {
				        normal: {
				            label: {
				                show: true
				            }
				        },
				        emphasis: {
				            label: {
				                show: true
				            },
				            areaColor: '#fff'
				        }
				    },
				    data: gdpdata
				}];

			function opt(max, min, vmp, unit, flag1, flag2) {
			    var optn = {
			        title: {
			            text: '2016广东省各市' + vmp,
			            subtext: '数据来源网络（单位：' + unit + '）',
			            left: 'center',
			            textStyle: {
			                color: '#000'
			            }
			        },
			        visualMap: {
			            min: min,
			            max: max,
			            text: [vmp, '单位：' + unit],
			            realtime: false,
			            calculable: true,
			            inRange: {
			                color: ['lightskyblue', 'yellow', 'orangered']
			            }
			        },
			        tooltip: {
			            formatter: function(params) {
			                return params.name + ": " + params.value + unit;
			            }
			        },
			        series: seriesdata
			    };
			    return optn;
			}


			option = opt(19610, 770, 'GDP', '亿', false, true);
			
			mapChart.setOption(option);
			
		});
		
});



</script>



</html>